<template>
	<view class="container">
		<view class="left">
			<text class="title">{{title1}}</text>
			<swiper autoplay circular indicator-dots interval="3000" duration="1000">
				<swiper-item v-for="(item,index) in floorData[0].floor_imgs" :key="index">
					<image class="swiper-img" :src="item"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="right">
			<view class="box">
				<text class="title">{{title2}}</text>
				<image :src="floorData[1].floor_imgs"> </image>
			</view>
			<view class="box">
				<text class="title">{{title3}}</text>
				<image :src="floorData[2].floor_imgs"></image>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "homeFloor",
		data() {
			return {
				floorData: [
					{ floor_title: '' },
					{ floor_title: '' },
					{ floor_title: '' },
				]
			};
		},
		methods: {
			getFloorsData() {
				this.$api.home.getFloorsData().then(res => {
					this.floorData = res.message;
					// {floor_imgs: Array(2), _id: "60e01e0e1b3200002c00610b", floor_title: ""冬至吃饺子""}
					// console.log(res.message);
				})
			}

		},
		created() {
			this.getFloorsData();
		},
		computed: {
			title1() {
				return this.floorData[0].floor_title.replace(/\"/g, "")
			},
			title2() {
				return this.floorData[1].floor_title.replace(/\"/g, "")
			},
			title3() {
				return this.floorData[2].floor_title.replace(/\"/g, "")
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		justify-content: space-between;
		margin-top: 36rpx;

		.title {
			background-color: #d86f32;
			width: 164rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			color: #ffffff;
			position: absolute;
			z-index: 88;
			border-radius: 8rpx;
			opacity: 0.73;
			top: 12rpx;
			left: 12rpx;
		}

		.left {
			width: 334rpx;
			height: 362rpx;
			position: relative;

			swiper {
				width: 334rpx;
				height: 362rpx;
			}

			image {
				width: 334rpx;
				height: 362rpx;
				border-radius: 8rpx;
			}

		}

		.right {
			width: 332rpx;

			.box {
				position: relative;

				image {
					width: 332rpx;
					height: 176rpx;
					border-radius: 8rpx;
				}
			}

		}
	}
</style>
